<template>
    <el-table
        ref="tableRef"
        :data="tableData"
        v-bind="tableDefaultAttribute"
        :max-height="tableHeight"
    >
        <template #empty>
            <span>无数据</span>
        </template>
        <el-table-column type="selection" width="55" v-bind:align="'center'" />
        <el-table-column
            v-bind:align="'center'"
            prop="action.label"
            label="功能名称"
        >
        </el-table-column>
        <el-table-column
            v-bind:align="'center'"
            prop="action.url"
            label="url"
        ></el-table-column>
        <el-table-column
            v-bind:align="'center'"
            prop="remark"
            label="备注"
        ></el-table-column>
    </el-table>
    <el-button-group class="bg">
        <el-button class="btn" type="primary" @click="onAdd"
            >增加菜单功能</el-button
        >
        <el-button class="btn" type="primary" @click="onDelete"
            >删除菜单功能</el-button
        >
        <!-- <el-button class="btn" type="primary" @click="onSave">保存</el-button> -->
    </el-button-group>
    <el-dialog
        v-model="showDetailDialog"
        title="菜单功能维护"
        draggable
        destroy-on-close
    >
        <ActionsSelect
            :menu-id="props.menuId"
            @close="handleCloseDialog"
        >
        </ActionsSelect> 
        
    </el-dialog>    
</template>

<script setup lang="ts" name="MenuAction">
import { ref, onMounted, watch, ComputedRef, reactive } from 'vue';
import { ElTable, ElMessageBox } from 'element-plus';
import { isEmpty, forEach } from 'lodash';
import { MenuActionModel } from '@/common/types/model';
import { tableDefaultAttribute, useTableInfo } from '@/hooks/useTable';
import { Request } from '@/app/request';
import ActionsSelect from './ActionsSelect.vue';
import { tableMaxHeightAdjust } from '@/common/const';
const tableRef = ref<InstanceType<typeof ElTable>>();
const tableData = reactive<MenuActionModel[]>([]);
const props = defineProps<{ menuId: number }>();
const tableHeight = ref(100);
const showDetailDialog = ref(false);
watch(
    () => props.menuId,
    () => {
        if (props.menuId === 0) {
            tableData.length = 0;
        } else {
            onRefresh();
        }
        
    },
);

onMounted(() => {
    tableHeight.value = window.innerHeight - Math.ceil(tableRef.value?.$el.getBoundingClientRect().bottom ) + tableMaxHeightAdjust;
});
const onRefresh = async () => {
    const req = new Request('菜单功能查询', {
        menuId: props.menuId,
    });
    const r = await req.post();
    tableData.length = 0;
    if (!isEmpty(r.obj)) {
        forEach(r.obj, (value) => {
            tableData.push(value);
        });
    }
};

const onAdd = () => {
    showDetailDialog.value = true;
};
/* const onSave = async () => {
    // const updateData: FuncActionModel[] = [];
    const req = new Request('功能action维护', {
        data: toRaw(tableData),
    });
    const r = await req.post();
    if (r.code > 100) {
        onRefresh();
    }
}; */
const onDelete = async () => {
    const rows = tableRef.value?.getSelectionRows();
    const names = Array<string>();
    const ids = Array<number>();
    forEach(rows, (v: MenuActionModel) => {
        names.push(v.action?.label as string);
        ids.push(v.id as number);
    });
    const msg = names.join(',     ');
    const cr = await ElMessageBox.confirm(msg, '确认删除如下功能', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning',
    })
        .then(() => {
            return true;
        })
        .catch(() => {
            return false;
        });
    if (cr) {
        //
        const req = new Request('菜单功能删除', {ids});
        const r = await req.post();
        if (r.code > 100) {
            onRefresh();
        }
    }
};
const handleCloseDialog = () => {
    onRefresh();
    showDetailDialog.value = false;
};
</script>

<style scoped lang="scss">
.bg {
    margin-top: 10px;

    .btn {
        margin-right: 10px;
    }
}
</style>
